<template>
  <view class="result-container">
    <!-- 顶部tab -->
    <uv-tabs :list="list" :current="activeTab" @click="onTabClick" />

    <!-- 面试概要 -->
    <view class="result-section" v-if="activeTab === 0">
      <view class="section-title">面试概要</view>
      <view class="summary-content">
        <view class="summary-chart">
          <!-- 占位雷达图，可替换为实际组件 -->
          <img
            src="https://img.alicdn.com/imgextra/i3/O1CN01QwQw2B1w6Qw6Qw6Qw_!!6000000006312-2-tps-300-300.png"
            alt="雷达图"
            class="radar-img"
          />
        </view>
        <view class="summary-text">
          周丽华在面试中介绍了她的背景和工作经验，强调了她在前端开发方面的技能，尤其是在使用 Vue 框架方面。她详细描述了在视频会议软件和名片小程序中的项目经历，特别是解决技术难点的过程。尽管她在技术问题的定位和解决思路上表现出色，但在表达流畅性和专业性方面略显不足。
        </view>
      </view>
    </view>
    <!-- 其它tab内容可用 v-if="activeTab === 1" ... -->
    <!-- 优缺点 -->
    <view class="result-section" v-if="activeTab === 0">
      <view class="section-title">缺点与优点</view>
      <view class="adv-disadv-row">
        <!-- 缺点 -->
        <view class="disadv-block">
          <view class="block-title">
            <span class="icon error">✖</span>
            <span>缺点</span>
          </view>
          <view class="block-list">
            <view class="block-item">
              表达不够流畅，语句有时不够连贯。
              <div class="block-quote">
                “呃，我在项目。呃，Siri他主要是两个软件，另一个是视频会议软件，一个是名片小程序。”
              </div>
            </view>
            <view class="block-item">
              对 Vue 的缺点描述不够深入，缺乏具体的解决方案。
              <div class="block-quote">
                “它的缺点的话，其实就是说。呃，他有时候其实不太稳定，就是，呃，这个数据的这个一处理他不太稳定的。”
              </div>
            </view>
            <view class="block-item">
              在技术细节的解释上有些模糊，缺乏清晰的逻辑。
              <div class="block-quote">
                “其实肯定就是要整体保持你的逻辑清晰就是说比如为什么你会去阅读上下文”
              </div>
            </view>
          </view>
        </view>
        <!-- 优点 -->
        <view class="adv-block">
          <view class="block-title">
            <span class="icon success">✔</span>
            <span>优点</span>
          </view>
          <view class="block-list">
            <view class="block-item">
              拥有近三年的前端开发经验，具备丰富的项目经验。
              <div class="block-quote">
                “然后我最擅长的技术是view，然后有，呃，有做过web，然后微信小程序H5都有做”
              </div>
            </view>
            <view class="block-item">
              能够清晰地描述技术难点及其解决过程，展现出较强的技术能力。
              <div class="block-quote">
                “首先我去。首先我为什么会发现是PC端的问题是因为我发现小程序之间视频会议没有问题”
              </div>
            </view>
            <view class="block-item">
              对用户体验和业务理解有较好的认识，能够站在用户角度思考问题。
              <div class="block-quote">
                “其实相对来说说，这一些业务开发的技术上其实不算太难。它主要是便要就是理解这个业务的一个内容吧”
              </div>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Result',
  data() {
    return {
      list: [
        { name: '面试概要' },
        { name: '问题分析' },
        { name: '面试官剖析' },
        { name: '相关知识点和概念(敬请期待)' }
      ],
      activeTab: 0
    }
  },
  methods: {
    onTabClick(e) {
      this.activeTab = e.index
    }
  }
}
</script>

<style lang="scss" scoped>
.result-container {
  min-height: 100vh;
  background: #f7fafc;
  padding: 0 0 32rpx 0;
}
.result-section {
  background: #fff;
  border-radius: 16rpx;
  margin: 32rpx 32rpx 0 32rpx;
  padding: 32rpx 32rpx 32rpx 32rpx;
  box-shadow: 0 2rpx 8rpx rgba(67, 214, 211, 0.04);
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #43d6d3;
  margin-bottom: 24rpx;
}
.summary-content {
  display: flex;
  align-items: flex-start;
  gap: 32rpx;
  @media (max-width: 700px) {
    flex-direction: column;
    gap: 12rpx;
  }
}
.summary-chart {
  width: 220rpx;
  min-width: 180rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.radar-img {
  width: 180rpx;
  height: 180rpx;
  background: #f7fafc;
  border-radius: 50%;
  border: 1px solid #eafaf3;
}
.summary-text {
  flex: 1;
  font-size: 26rpx;
  color: #444;
  line-height: 1.8;
  word-break: break-all;
}
.adv-disadv-row {
  display: flex;
  gap: 32rpx;
  @media (max-width: 700px) {
    flex-direction: column;
    gap: 12rpx;
  }
}
.disadv-block, .adv-block {
  flex: 1;
  background: #f9f9f9;
  border-radius: 12rpx;
  padding: 24rpx 24rpx 18rpx 24rpx;
  min-width: 0;
}
.disadv-block {
  border: 1px solid #ffeaea;
  background: #fff6f6;
}
.adv-block {
  border: 1px solid #e6f7f6;
  background: #f6fffa;
}
.block-title {
  display: flex;
  align-items: center;
  font-size: 26rpx;
  font-weight: bold;
  margin-bottom: 18rpx;
  gap: 8rpx;
}
.icon {
  font-size: 28rpx;
  display: inline-block;
  width: 32rpx;
  height: 32rpx;
  text-align: center;
  line-height: 32rpx;
  border-radius: 50%;
}
.icon.error {
  background: #fa3534;
  color: #fff;
}
.icon.success {
  background: #43d6d3;
  color: #fff;
}
.block-list {
  display: flex;
  flex-direction: column;
  gap: 18rpx;
}
.block-item {
  font-size: 24rpx;
  color: #333;
  margin-bottom: 4rpx;
}
.block-quote {
  background: #f7fafc;
  color: #888;
  font-size: 22rpx;
  border-left: 4rpx solid #e0e0e0;
  margin: 8rpx 0 0 0;
  padding: 8rpx 0 8rpx 16rpx;
  border-radius: 4rpx;
}
</style>
